import {Button, Input, Modal, Tag, Typography} from "antd";
import {useEffect, useState} from "react";
import TextArea from "antd/es/input/TextArea";
import RequestUtils from "../../../utils/requestUtils";
import RequestApis from "../../../apis/requestApis";
import PermissionSelect from "../permission/permissionSelect";
import {CloseOutlined, UserOutlined} from "@ant-design/icons";

const {Title} = Typography;

/**
 * 角色创建模态框组件
 *
 * @returns {JSX.Element}
 * @constructor
 */
const RoleCreate = (props) => {

    const {
        messageApi,
        visible,
        setVisible,
        pageQuerySysRole
    } = props;

    // 创建系统角色请求参数
    const [createSysRoleReq, setCreateSysRoleReq] = useState({
        roleName: "",
        roleDescription: ""
    });

    // 权限选择控件参数
    const [permissionSelectVisible, setPermissionSelectVisible] = useState(false);
    const [permissions, setPermissions] = useState([]);

    /**
     * 创建系统角色
     */
    const createSysRole = () => {
        RequestUtils.post(RequestApis.roleManage.create, {
            roleName: createSysRoleReq.roleName,
            roleDescription: createSysRoleReq.roleDescription,
            permissionCodes: permissions.map(v => v.permissionCode)
        }).then(res => {
            pageQuerySysRole();
            messageApi.success("创建系统角色成功");
            setVisible(false);
        }).catch(err => messageApi.error(err.message))
    }

    useEffect(() => {
        setCreateSysRoleReq({
            roleName: "",
            roleDescription: "",
        })
        setPermissions([]);
    }, [visible]);

    return (
        <Modal
            open={visible}
            title={
                <div style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
                    <UserOutlined style={{color: '#52c41a', fontSize: '18px'}}/>
                    <Title level={4} style={{margin: 0}}>新增系统角色</Title>
                </div>
            }
            width={640}
            onCancel={() => setVisible(false)}
            footer={[
                <Button
                    key="submit"
                    type={"primary"}
                    onClick={createSysRole}
                    style={{
                        padding: '6px 24px',
                        fontSize: '14px',
                        borderRadius: '4px',
                        transition: 'all 0.2s ease'
                    }}
                    hoverStyle={{
                        opacity: 0.9,
                        transform: 'translateY(-1px)'
                    }}
                >
                    新增角色
                </Button>,
                <Button
                    key="cancel"
                    danger
                    style={{
                        marginLeft: "12px",
                        padding: '6px 24px',
                        fontSize: '14px',
                        borderRadius: '4px',
                        transition: 'all 0.2s ease'
                    }}
                    onClick={() => setVisible(false)}
                    hoverStyle={{
                        opacity: 0.9,
                        transform: 'translateY(-1px)'
                    }}
                >
                    取消
                </Button>
            ]}
            bodyStyle={{
                padding: '24px',
                backgroundColor: '#fafafa',
                borderRadius: '8px 8px 0 0'
            }}
            style={{
                borderRadius: '8px',
                overflow: 'hidden'
            }}
        >
            <div style={{fontSize: '14px'}}>

                {/* 角色名称输入项 */}
                <div style={{
                    marginBottom: '24px',
                    display: 'flex',
                    flexDirection: 'column',
                    gap: '8px'
                }}>
                    <div style={{
                        display: 'flex',
                        alignItems: 'center',
                        color: '#1f2329',
                        fontWeight: 500,
                        lineHeight: '1.5'
                    }}>
                        角色名称
                        <span style={{color: '#ff4d4f', marginLeft: '4px'}}>*</span>
                    </div>
                    <Input
                        value={createSysRoleReq.roleName}
                        onChange={(e) => {
                            setCreateSysRoleReq({
                                ...createSysRoleReq,
                                roleName: e.target.value
                            })
                        }}
                        style={{
                            width: '100%',
                            borderRadius: '4px',
                            border: '1px solid #dcdfe6',
                            height: '40px',
                            transition: 'all 0.2s ease'
                        }}
                        onFocus={(e) => {
                            e.currentTarget.style.borderColor = '#1890ff';
                            e.currentTarget.style.boxShadow = '0 0 0 2px rgba(24, 144, 255, 0.2)';
                        }}
                        onBlur={(e) => {
                            e.currentTarget.style.borderColor = '#dcdfe6';
                            e.currentTarget.style.boxShadow = 'none';
                        }}
                    />
                </div>

                {/* 角色描述输入项 */}
                <div style={{
                    marginBottom: '24px',
                    display: 'flex',
                    flexDirection: 'column',
                    gap: '8px'
                }}>
                    <div style={{
                        color: '#1f2329',
                        fontWeight: 500,
                        lineHeight: '1.5'
                    }}>
                        角色描述
                    </div>
                    <TextArea
                        rows={4}
                        value={createSysRoleReq.roleDescription}
                        onChange={(e) => {
                            setCreateSysRoleReq({
                                ...createSysRoleReq,
                                roleDescription: e.target.value
                            })
                        }}
                        style={{
                            width: '100%',
                            borderRadius: '4px',
                            border: '1px solid #dcdfe6',
                            transition: 'all 0.2s ease',
                            resize: 'vertical'
                        }}
                        onFocus={(e) => {
                            e.currentTarget.style.borderColor = '#1890ff';
                            e.currentTarget.style.boxShadow = '0 0 0 2px rgba(24, 144, 255, 0.2)';
                        }}
                        onBlur={(e) => {
                            e.currentTarget.style.borderColor = '#dcdfe6';
                            e.currentTarget.style.boxShadow = 'none';
                        }}
                    />
                </div>

                <div style={{marginBottom: '12px'}}>
                    <Button
                        color={'purple'}
                        variant={'outlined'}
                        style={{
                            width: '220px',
                            padding: '6px 16px',
                            fontSize: '14px',
                            transition: 'all 0.2s ease'
                        }}
                        hoverStyle={{
                            backgroundColor: 'rgba(114, 46, 209, 0.05)',
                            transform: 'translateY(-1px)'
                        }}
                        onClick={() => {
                            setPermissionSelectVisible(true);
                        }}
                    >
                        选择权限
                    </Button>
                </div>

                <div style={{
                    display: 'flex',
                    flexDirection: 'column',
                    gap: '8px'
                }}>
                    <div style={{
                        color: '#1f2329',
                        fontWeight: 500,
                        lineHeight: '1.5',
                    }}>
                        当前已经选中的权限
                    </div>

                    {/* 修复权限区域高度问题：去掉minHeight，添加alignItems防止拉伸 */}
                    <div style={{
                        backgroundColor: '#F5F7FA',
                        padding: '12px',
                        borderRadius: '4px',
                        display: 'flex',
                        flexWrap: 'wrap',
                        gap: '8px',
                        alignItems: 'flex-start', // 防止子元素拉伸导致高度异常
                        minHeight: 'auto', // 由内容决定高度
                    }}>
                        {permissions.length > 0 ? (
                            permissions.map((v) => (
                                <Tag
                                    color="geekblue"
                                    key={v.permissionCode}
                                    style={{
                                        padding: '4px 8px',
                                        fontSize: '13px',
                                        borderRadius: '4px',
                                        transition: 'all 0.2s ease'
                                    }}
                                >
                                    <span>{v.permissionName}</span>
                                    <span style={{
                                        marginLeft: '6px',
                                        fontSize: '12px',
                                        cursor: 'pointer',
                                        transition: 'color 0.2s ease'
                                    }}
                                          onClick={() => {
                                              setPermissions(permissions.filter(item => item.permissionCode !== v.permissionCode));
                                          }}
                                          onMouseEnter={(e) => {
                                              e.currentTarget.style.color = '#ff4d4f';
                                          }}
                                          onMouseLeave={(e) => {
                                              e.currentTarget.style.color = 'inherit';
                                          }}
                                    >
                                        <CloseOutlined/>
                                    </span>
                                </Tag>
                            ))
                        ) : (
                            <div style={{
                                width: '100%',
                                padding: '12px 0', // 用padding控制空状态高度
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                color: '#86909c',
                                fontSize: '14px'
                            }}>
                                暂无关联权限
                            </div>
                        )}
                    </div>

                    <PermissionSelect
                        visible={permissionSelectVisible}
                        setVisible={setPermissionSelectVisible}
                        permissions={permissions}
                        setPermissions={setPermissions}
                    />
                </div>
            </div>
        </Modal>
    )
}

export default RoleCreate;